import { useEffect, useState } from 'react'
import { Table, Button } from 'antd'
import styles from './index.less'
import { fetchUsers } from '@/api/users'


// 自定义组件的引入
import ChildModal from './child_modal'

export default () => {
  const [dataSource, setDataSource] = useState()
  const [isRefresh, setIsRefresh] = useState(false)  // 是否触发重新请求user列表

  // 只有第一次组件挂载 或者 isRefresh 状态发生改变 这里就会触发 否则不会触发
  useEffect(() => {
    _fetchUsers()
  }, [isRefresh])

  const columns = [
    { title: '用户', dataIndex: 'username' },
    {
      title: '操作', render: () => (
        <Button type='primary' danger onClick={handleDelete}>删除</Button>
      )
    }
  ]

  // 网络请求 获取到所有的用户
  const _fetchUsers = () => {
    fetchUsers().then((res: any) => {
      const tempArr = res.data.data
      setDataSource(tempArr)  // 设置dataSorce 表格源数据
    })
  }

  // 删除一个用户
  const handleDelete = () => {
    setIsRefresh(!isRefresh)  // 重新获取到新的数据
  }

  // 添加一个用户
  const handleInsert = (payload: string) => {
    console.log(payload);
    setIsRefresh(!isRefresh)  // 重新从数据库获取到新的数据
  }

  return (
    <div className={styles.userManage}>
      <ChildModal handleInsert={handleInsert} />

      {/* 表格信息 */}
      <Table columns={columns} dataSource={dataSource} pagination={false} />
    </div>
  );
}